---
title: Show
description: "`Show`は、条件に基づいて子要素を表示または非表示にするコンポーネントです。"
storybook: components-show--basic
source: components/show
---

```tsx preview
<Show when={true}>
  <Text>インビジブルガール 葉隠透</Text>
</Show>
```

## 使い方

:::code-group

```tsx [package]
import { Show } from "@yamada-ui/react"
```

```tsx [alias]
import { Show } from "@/components/ui"
```

```tsx [monorepo]
import { Show } from "@workspaces/ui"
```

:::

```tsx
<Show />
```

### 条件付きでレンダリングする

コンテンツを条件付きでレンダリングする場合は、`when`に真偽値を設定します。

```tsx preview functional client
const [isVisible, setIsVisible] = useState(true)

return (
  <VStack>
    <Button onClick={() => setIsVisible((prev) => !prev)}>
      {isVisible ? "Hide" : "Show"} Content
    </Button>
    <Show when={isVisible}>
      <Text>インビジブルガール 葉隠透</Text>
    </Show>
  </VStack>
)
```

### フォールバックを使う

フォールバックを使う場合は、`fallback`に`ReactNode`を設定します。

```tsx preview functional client
const [isVisible, setIsVisible] = useState(false)

return (
  <VStack>
    <Button onClick={() => setIsVisible((prev) => !prev)}>
      Toggle Content
    </Button>
    <Show when={isVisible} fallback={<Text color="gray.500">衣服</Text>}>
      <Text color="green.500">インビジブルガール 葉隠透</Text>
    </Show>
  </VStack>
)
```

## Props

<PropsTable name="show" />
